<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0061)http://javascript.internet.com/clocks/wall-clock-example.html -->
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content=2000-09-09 name=date>
<META content="Web Developer" name=channel>
<META content="Randy Bennett (rbennett@thezone.net)" name=author>
<META content=Clocks name=section>
<SCRIPT language=JavaScript>
<!-- Original:  Randy Bennett (rbennett@thezone.net) -->
<!-- Web Site:  http://home.thezone.net/~rbennett/utility/sitemap.htm -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
pX = 100;
pY = 100;
obs = new Array(13);
function ob() {
for (i = 0; i < 13; i++) {
if (document.all) obs[i] = new Array (eval('ob'+i).style,-100,-100);
else obs[i] = new Array (eval('document.ob'+i),-100,-100);
   }
}
function cl(a, b, c) {
if (document.all) {
if (a != 0) b += -1;
eval('c'+a+'.style.pixelTop='+(pY+(c)));
eval('c'+a+'.style.pixelLeft='+(pX+(b)));
}
else {
if (a != 0) b += 10;
eval('document.c'+a+'.top='+(pY+(c)));
eval('document.c'+a+'.left='+(pX+(b)));
   }
}
function runClock() {
for (i = 0; i < 13; i++) {
obs[i][0].left=obs[i][1]+pX;
obs[i][0].top=obs[i][2]+pY;
   }
}
var lastsec;
function timer() {
time = new Date ();
sec = time.getSeconds();
if (sec != lastsec) {
lastsec = sec;
sec = Math.PI * sec / 30;
min = Math.PI * time.getMinutes() / 30;
hr = Math.PI * time.getHours() / 6 + Math.PI * parseInt(time.getMinutes()) / 360;
for (i = 1; i < 6; i++) {
obs[i][1] = Math.sin(sec) * (44 - (i-1) * 11) - 16;
if (document.layers)obs[i][1] += 10;
obs[i][2] = -Math.cos(sec) * (44 - (i-1) * 11) - 27;
}
for (i = 6;i < 10; i++) {
obs[i][1] = Math.sin(min) * (40 - (i-6) * 10) - 16;
if (document.layers)obs[i][1] += 10;
obs[i][2] = -Math.cos(min) * (40 - (i-6) * 10) - 27;
}
for (i = 10; i < 13; i++) {
obs[i][1] = Math.sin(hr) * (37 - (i-10) * 11) - 16;
if (document.layers)obs[i][1] += 10;
obs[i][2] = -Math.cos(hr) * (37 - (i-10) * 11) - 27;
      }
   }
}
function setNum() {
cl (0, -67, -65);
cl (1, 10, -51);
cl (2, 28, -33);
cl (3, 35, -8);
cl (4, 28, 17);
cl (5, 10, 35);
cl (6, -15, 42);
cl (7, -40, 35);
cl (8, -58, 17);
cl (9, -65, -8);
cl (10, -58, -33);
cl (11, -40, -51);
cl (12, -16, -56);
}
function startClock() {
ob();
setNum();
setInterval('timer()', 100);
setInterval('runClock()', 100);
}
// End -->
</SCRIPT>

<STYLE>.num {
	WIDTH: 30px; COLOR: white; TEXT-ALIGN: center
}
</STYLE>

<META content="MSHTML 5.50.4611.1300" name=GENERATOR></HEAD>
<BODY onload=javascript:startClock();>
<DIV id=c0 style="Z-INDEX: 2; LEFT: 36px; POSITION: absolute; TOP: 36px">
<TABLE>
  <TBODY>
  <TR>
    <TD width=120 bgColor=#000000 height=120>&nbsp; </TD></TR></TBODY></TABLE></DIV>
<DIV class=num id=c1 
style="FONT-SIZE: 11px; Z-INDEX: 5; LEFT: 20px; POSITION: absolute; TOP: -20px"><B>1</B></DIV>
<DIV class=num id=c2 
style="FONT-SIZE: 11px; Z-INDEX: 5; LEFT: 20px; POSITION: absolute; TOP: -20px"><B>2</B></DIV>
<DIV class=num id=c3 
style="FONT-SIZE: 11px; Z-INDEX: 5; LEFT: 20px; POSITION: absolute; TOP: -20px"><B>3</B></DIV>
<DIV class=num id=c4 
style="FONT-SIZE: 11px; Z-INDEX: 5; LEFT: 20px; POSITION: absolute; TOP: -20px"><B>4</B></DIV>
<DIV class=num id=c5 
style="FONT-SIZE: 11px; Z-INDEX: 5; LEFT: 20px; POSITION: absolute; TOP: -20px"><B>5</B></DIV>
<DIV class=num id=c6 
style="FONT-SIZE: 11px; Z-INDEX: 5; LEFT: 20px; POSITION: absolute; TOP: -20px"><B>6</B></DIV>
<DIV class=num id=c7 
style="FONT-SIZE: 11px; Z-INDEX: 5; LEFT: 20px; POSITION: absolute; TOP: -20px"><B>7</B></DIV>
<DIV class=num id=c8 
style="FONT-SIZE: 11px; Z-INDEX: 5; LEFT: 20px; POSITION: absolute; TOP: -20px"><B>8</B></DIV>
<DIV class=num id=c9 
style="FONT-SIZE: 11px; Z-INDEX: 5; LEFT: 20px; POSITION: absolute; TOP: -20px"><B>9</B></DIV>
<DIV class=num id=c10 
style="FONT-SIZE: 11px; Z-INDEX: 5; LEFT: 20px; POSITION: absolute; TOP: -20px"><B>10</B></DIV>
<DIV class=num id=c11 
style="FONT-SIZE: 11px; Z-INDEX: 5; LEFT: 20px; POSITION: absolute; TOP: -20px"><B>11</B></DIV>
<DIV class=num id=c12 
style="FONT-SIZE: 11px; Z-INDEX: 5; LEFT: 20px; POSITION: absolute; TOP: -20px"><B>12</B></DIV>
<DIV class=num id=ob0 
style="Z-INDEX: 1; LEFT: -20px; POSITION: absolute; TOP: -20px"></DIV>
<DIV class=num id=ob1 
style="Z-INDEX: 8; LEFT: -20px; POSITION: absolute; TOP: -20px"><FONT 
color=#0000ff size=+3><B>.</B></FONT></DIV>
<DIV class=num id=ob2 
style="Z-INDEX: 8; LEFT: -20px; POSITION: absolute; TOP: -20px"><FONT 
color=#0000ff size=+3><B>.</B></FONT></DIV>
<DIV class=num id=ob3 
style="Z-INDEX: 8; LEFT: -20px; POSITION: absolute; TOP: -20px"><FONT 
color=#0000ff size=+3><B>.</B></FONT></DIV>
<DIV class=num id=ob4 
style="Z-INDEX: 8; LEFT: -20px; POSITION: absolute; TOP: -20px"><FONT 
color=#0000ff size=+3><B>.</B></FONT></DIV>
<DIV class=num id=ob5 
style="Z-INDEX: 8; LEFT: -20px; POSITION: absolute; TOP: -20px"><FONT 
color=#0000ff size=+3><B>.</B></FONT></DIV>
<DIV class=num id=ob6 
style="Z-INDEX: 7; LEFT: -20px; POSITION: absolute; TOP: -20px"><FONT 
color=#00ffff size=+3><B>.</B></FONT></DIV>
<DIV class=num id=ob7 
style="Z-INDEX: 7; LEFT: -20px; POSITION: absolute; TOP: -20px"><FONT 
color=#00ffff size=+3><B>.</B></FONT></DIV>
<DIV class=num id=ob8 
style="Z-INDEX: 7; LEFT: -20px; POSITION: absolute; TOP: -20px"><FONT 
color=#00ffff size=+3><B>.</B></FONT></DIV>
<DIV class=num id=ob9 
style="Z-INDEX: 7; LEFT: -20px; POSITION: absolute; TOP: -20px"><FONT 
color=#00ffff size=+3><B>.</B></FONT></DIV>
<DIV class=num id=ob10 
style="Z-INDEX: 6; LEFT: -20px; POSITION: absolute; TOP: -20px"><FONT 
color=#ffff00 size=+3><B>.</B></FONT></DIV>
<DIV class=num id=ob11 
style="Z-INDEX: 6; LEFT: -20px; POSITION: absolute; TOP: -20px"><FONT 
color=#ffff00 size=+3><B>.</B></FONT></DIV>
<DIV class=num id=ob12 
style="Z-INDEX: 6; LEFT: -20px; POSITION: absolute; TOP: -20px"><FONT 
color=#ffff00 size=+3><B>.</B></FONT></DIV></BODY></HTML>
